<template>
  <div
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <Header :isGoBack="false">
      <template v-slot:left>
        <span>单词量测试 <i class="el-icon-arrow-right"></i> 测试中心</span>
      </template>
      <template v-slot:right>
        <div class="btn" @click="goStudyIndex">返回首页</div>
      </template>
    </Header>
    <div class="study-center w1200">
      <el-card shadow="never" class="header-content">
        <div class="study-center-title">
          <span>{{ $route.query.courseName }}</span>
          <el-tooltip
            v-if="currentQuestion && currentQuestion.question_type == 5"
            class="item"
            effect="dark"
            content="按下enter进入检查提交"
            placement="right-start"
          >
            <i
              style="color:#E6A23C;margin-left:5px"
              class="el-icon-warning-outline"
            ></i>
          </el-tooltip>
        </div>
        <div class="study-content">
          <div class="study-content-header">
            <img
              src="~@/assets/img/right.png"
              alt=""
              style="margin-left: 16px;"
              class="mr10"
            />
            <span class="mr10">{{ topic.sucssesTopic }}</span>
            <img class="mr10" src="~@/assets/img/error.png" alt="" />
            <span>{{ topic.errTopic }}</span>
            <div class="progress">
              <el-progress
                color="#EC7B32"
                v-if="percentage || percentage == 0"
                :show-text="false"
                :percentage="percentage"
              ></el-progress>
            </div>
            <div style="text-align: center;">
              <span
                >当前第<span style="color: #FF9610;font-size: 20px;"
                  >&nbsp; {{ this.currentTopic }}&nbsp;</span
                >个单词</span
              >
            </div>
          </div>
          <!-- 拼写 -->
          <div
            class="study-content-answer"
            v-if="currentQuestion && currentQuestion.question_type == 4"
          >
            <div class="input4" style="">
              <AudioPlay
                ref="audioPlay4"
                style="width: 37px; height: 32px;"
                :type="1"
                @onIsPlay="onIsPlayWord"
                :audioSrc="baseURL + currentQuestion.en_url"
              >
              </AudioPlay>
              <el-input
                :disabled="!isAnswer"
                class="answerInput"
                v-model="answerInput"
                ref="focusInput"
              ></el-input>
              <el-button
                v-if="isAnswer"
                class="notarize"
                @click="checkVocabularyAnswer()"
                >确定</el-button
              >
              <div v-else>
                <img
                  v-if="isTrue === 1"
                  src="~@/assets/img/right-big.png"
                  alt=""
                  class="succeed-img"
                  style="margin-left: 16px;"
                />
                <img
                  v-else
                  class="error-img"
                  src="~@/assets/img/error-big.png"
                  alt=""
                />
              </div>
            </div>
            <div v-if="isTrue === 0">
              <span
                style="color: #FF9610;font-size: 26px; margin-left: 340px;margin-top: 10px;"
                >{{ trueAnswer }}</span
              >
            </div>
          </div>
          <!-- 默写 -->
          <div
            class="study-content-answer"
            v-if="currentQuestion && currentQuestion.question_type == 5"
          >
            <div class="input5">
              <div class="title">
                <span>{{
                  currentQuestion.question_type == 1
                    ? currentQuestion.word_name
                    : currentQuestion.paraphrase
                }}</span>
              </div>
              <div style="display: flex;align-items: center;">
                <el-input
                  ref="focusInput"
                  :disabled="!isAnswer"
                  class="answerInput"
                  v-model="answerInput"
                ></el-input>
                <!-- <el-button
                  v-if="isAnswer"
                  class="notarize"
                  @click="checkVocabularyAnswer()"
                  >确定</el-button
                > -->
                <div v-if="!isAnswer">
                  <img
                    v-if="isTrue === 1"
                    src="~@/assets/img/right-big.png"
                    alt=""
                    class="succeed-img"
                    style="margin-left: 16px;"
                  />
                  <img
                    v-else
                    class="error-img"
                    src="~@/assets/img/error-big.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div v-if="isTrue === 0">
              <span
                style="color: #FF9610;font-size: 26px; margin-left: 340px;margin-top: 10px;"
                >{{ trueAnswer }}</span
              >
            </div>
          </div>
          <!-- 单选 -->
          <div
            class="study-content-multiple-choice"
            v-if="
              currentQuestion &&
                (currentQuestion.question_type == 1 ||
                  currentQuestion.question_type == 2)
            "
          >
            <div class="title">
              <span>{{
                currentQuestion.question_type == 1
                  ? currentQuestion.word_name
                  : currentQuestion.paraphrase
              }}</span>
            </div>
            <div
              class="selectOption"
              :class="{
                succeed: sucssesIndex == index,
                error: errIndex == index,
              }"
              @click="checkVocabularyAnswer(item, index)"
              v-for="(item, index) in currentQuestion.answer_list"
              :key="item.word_id"
            >
              <span class="txt">
                {{ typeLetter[index] }}&nbsp;
                {{
                  currentQuestion.question_type == 1
                    ? item.paraphrase
                    : item.word_name
                }}
              </span>
              <img
                v-if="sucssesIndex == index"
                src="~@/assets/img/right-big.png"
                alt=""
                class="succeed-img"
              />
              <img
                v-if="errIndex == index"
                src="~@/assets/img/error-big.png"
                alt=""
                class="error-img"
              />
            </div>
          </div>
          <div
            class="study-footer"
            :style="{
              'margin-bottom':
                currentQuestion.question_type == 3 ? '173px' : '50px',
            }"
          >
            <span v-if="currentQuestion.question_type == 3" class="tip"
              >请正确拼写出单词，按
              <img
                style="width: 18px; height: 16px;"
                src="~@/assets/img/icon-audio.png"
                alt=""
              />可重复听读</span
            >
            <div class="btn-box">
              <span class="btn-submit" @click="checkAll">交 &nbsp;卷</span>
              <el-button
                :disabled="
                  isAnswer || this.currentTopic == this.questionList.length
                "
                class="btn-next"
                @click="nextTopic"
                :class="{
                  disabled:
                    isAnswer || this.currentTopic == this.questionList.length,
                }"
                >下一题</el-button
              >
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 交卷结果弹框 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="
        $route.query.courseName + ' (题量:' + this.questionList.length + ')'
      "
      :visible.sync="resultDialogVisible"
      center
      width="841px"
    >
      <el-divider></el-divider>
      <div class="result-content">
        <div class="result-content-top">
          <span
            >答对：<span class="sucsses">{{ topic.sucssesTopic }}</span>
            题</span
          >
          <span
            >答错：<span class="error">{{ topic.errTopic }}</span> 题</span
          >
          <span
            >用时：<span class="time">{{
              ((reportTime - Number($route.query.dataTime)) / 1000)
                | formateTime
            }}</span></span
          >
        </div>
        <div class="result-content-center">
          <p>
            本次单词量测试 您已经掌握<span class="percentage">{{
              ((topic.sucssesTopic / this.questionList.length) * 100).toFixed(
                0
              ) + "%"
            }}</span>
          </p>
          <p>继续加油吧！</p>
          <img
            v-if="ispass"
            style="width: 109px; height: 105px;"
            src="~@/assets/img/pass.png"
            alt=""
          />
          <img
            v-else
            style="width: 109px; height: 105px;"
            src="~@/assets/img/play-up.png"
            alt=""
          />
          <span class="ispass" :class="{ pass: ispass }">{{
            ispass ? "通过" : "不通过"
          }}</span>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="report" @click="handleReport">学习报告</el-button>
        <el-button class="quit" @click="goStudyIndex">退出测试</el-button>
      </span>
    </el-dialog>
    <!-- 学习报告 -->
    <el-dialog
      :close-on-click-modal="false"
      title="单词量测试"
      :visible.sync="reportDialogVisible"
      center
      width="629px"
    >
      <el-divider></el-divider>
      <div class="report-content">
        <div class="report-content-top">
          <div class="title">
            学生信息:
          </div>
          <div class="info">
            姓名：<span>{{ nickName }}</span>
            <!-- 账号：<span>10010000</span> -->
          </div>
        </div>
        <div class="report-content-center">
          <div class="title">
            测试信息：
          </div>
          <div class="content">
            <div>
              测试时间：<span>{{
                Number($route.query.dataTime) | dataFormat
              }}</span>
            </div>
            <div>
              测试类型：<span>{{
                $route.query.courseName +
                  " (题量:" +
                  "&nbsp;" +
                  this.questionList.length +
                  ")"
              }}</span>
            </div>
            <div>
              得分:
              <span
                >{{
                  (
                    (topic.sucssesTopic * 100) /
                    this.questionList.length
                  ).toFixed(0)
                }}
                分</span
              >
              掌握：<span>{{
                ((topic.sucssesTopic / this.questionList.length) * 100).toFixed(
                  0
                ) + "%"
              }}</span>
            </div>
            <div>
              <span style="margin-right: 26px;"
                >答对：<span style="color: #2C80FF;"
                  >{{ topic.sucssesTopic }}
                </span>
                题</span
              >
              <span style="margin-right: 26px;"
                >答错：<span style="color: #D81E06;">{{ topic.errTopic }} </span
                >题</span
              >
              <span
                >用时：<span style="color: #FF9610;">{{
                  ((reportTime - Number($route.query.dataTime)) / 1000)
                    | formateTime
                }}</span></span
              >
            </div>
            <div>
              <span style="margin-right: 26px;"
                >应掌握单词：<span style="color: #2C80FF;"
                  >{{ this.questionList.length }}
                </span>
                个</span
              >
              <span style="margin-right: 26px;"
                >实际掌握单词：<span style="color: #D81E06;"
                  >{{ topic.sucssesTopic }} </span
                >个</span
              >
              <span
                >未掌握单词：<span style="color: #FF9610;">{{
                  this.questionList.length - topic.sucssesTopic
                }}</span
                >个</span
              >
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="quit" @click="goStudyIndex">退出测试</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Header from "@/components/Header";
import AudioPlay from "@/components/AudioPlay";
import {
  findWordPronunciationVo,
  checkVocabularyAnswer,
  checkAll,
} from "@/api/vocabulary.js";
// import { checkPaperData } from "@/api/index";
export default {
  name: "EnglishWebIndex",
  components: {
    Header,
    AudioPlay,
  },
  data() {
    return {
      isAnswer: true,
      isTrue: null,
      trueAnswer: "",
      loading: false,
      // ispass: true,
      type: 1,
      audioUrl: "",
      answerInput: "",
      totalScore: 0,
      typeLetter: {
        0: "A",
        1: "B",
        2: "C",
        3: "D",
      },
      questionList: [],
      topic: {
        sucssesTopic: 0,
        errTopic: 0,
      },
      isPlay: false,
      resultDialogVisible: false,
      reportDialogVisible: false,
      currentTopic: 0,
      currentQuestion: {},
      sucssesIndex: null,
      errIndex: null,
      reportTime: null,
    };
  },
  filters: {
    dataFormat(time) {
      let date = new Date(time);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";

      let h =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      let m =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      let s =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      let strDate = Y + M + D + h + m + s;
      return strDate;
    },
    formateTime(time) {
      const h = parseInt(time / 3600);
      const minute = parseInt((time / 60) % 60);
      const second = Math.ceil(time % 60);
      const hours = h < 10 ? "0" + h : h;
      const formatSecond = second > 59 ? 59 : second;
      return `${hours > 0 ? `${hours}:` : ""}${
        minute < 10 ? "0" + minute : minute
      }:${formatSecond < 10 ? "0" + formatSecond : formatSecond}`;
    },
  },
  computed: {
    nickName() {
      return localStorage.getItem("XGBX_NICKNAME");
    },
    percentage() {
      // 计算数值的总和
      return Number(
        (
          ((this.topic.sucssesTopic + this.topic.errTopic) /
            this.questionList.length) *
          100
        ).toFixed(2)
      );
    },
    ispass() {
      return (this.topic.sucssesTopic / this.questionList.length) * 100 >= 60;
    },
    // topicCount(){
    //     return this.topic.sucssesTopic+this.topic.errTopic
    // }
  },
  watch: {
    currentTopic: {
      async handler() {
        await this.$nextTick();
        this.currentQuestion = this.questionList[this.currentTopic - 1];
        await this.$nextTick();
        if (this.currentQuestion.question_type == 4) {
          this.$refs.audioPlay4.handleClickPlayAudio();
        }
      },
      // immediate: true
    },
  },
  mounted() {
    window.addEventListener("keyup", this.watchKeyUp);
    this.findWordPronunciationVo();
    console.log(
      JSON.parse(this.$route.query.orderDetail),
      "(this.$route.query"
    );
  },
  created() {
    if (localStorage.getItem("XGZX_QUESTION_LIST")) {
      this.questionList = JSON.parse(
        localStorage.getItem("XGZX_QUESTION_LIST")
      );
    }
    if (localStorage.getItem("XGZX_QUESTION_CURRENTTOPIC")) {
      this.topic = JSON.parse(
        localStorage.getItem("XGZX_QUESTION_CURRENTTOPIC")
      );
      this.currentTopic = this.topic.sucssesTopic + this.topic.errTopic + 1;
    }
    window.addEventListener("beforeunload", this.savaData);
  },
  beforeDestroy() {
    window.removeEventListener("keyup", this.watchKeyUp);
  },
  methods: {
    // 监听键盘回车事件
    async watchKeyUp(e) {
      if (
        this.currentQuestion.question_type != 5 &&
        this.currentQuestion.question_type != 4
      )
        return;
      if (e.keyCode == 13 && this.isAnswer) {
        this.checkVocabularyAnswer();
        return;
      }
      if (
        e.keyCode == 13 &&
        !this.isAnswer &&
        this.currentTopic < this.questionList.length
      ) {
        this.nextTopic();
        await this.$nextTick();
        this.$refs.focusInput.focus();
      }
    },
    // 随机数组
    // randomSortArray(arr) {
    //     let len = arr.length;
    //     for (let i = len - 1; i >= 0; i--) {
    //         let randomIndex = Math.floor(Math.random() * (i + 1));
    //         let temp = arr[randomIndex];
    //         arr[randomIndex] = arr[i];
    //         arr[i] = temp;
    //     }
    //     return arr;
    // },
    goStudyIndex() {
      this.$router.push({
        name: "studyIndex",
      });
    },
    // 存储刷新时需要保存的数据
    savaData() {
      if (
        this.resultDialogVisible == true ||
        this.reportDialogVisible == true
      ) {
        this.goStudyIndex();
        return;
      }
      if (this.isAnswer == false) {
        this.currentTopic += 1;
      }
      localStorage.setItem(
        "XGZX_QUESTION_LIST",
        JSON.stringify(this.questionList)
      );
      localStorage.setItem(
        "XGZX_QUESTION_CURRENTTOPIC",
        JSON.stringify(this.topic)
      );
    },
    nextTopic() {
      this.answerInput = "";
      this.isAnswer = true;
      this.isTrue = null;
      this.currentTopic += 1;
      this.errIndex = null;
      this.sucssesIndex = null;
    },
    onIsPlayWord(isPlay) {
      this.isPlay = isPlay;
    },
    // 校验单个题目
    async checkVocabularyAnswer(item, index) {
      if (!this.isAnswer) return;
      let params = {};
      let itemData = {};
      // itemData.allIndex = this.currentTopic - 1
      params.questionType = this.currentQuestion.question_type;
      params.wordId = this.currentQuestion.word_id;
      params.useTime = 5;
      if (
        this.currentQuestion.question_type == 4 ||
        this.currentQuestion.question_type == 5
      ) {
        params.wordName = this.answerInput;
        params.paraphrase = this.answerInput;
        params.answerList = [];
        params.studentAnswerList = [{ wordName: this.answerInput }];
        // 储存数据
        // itemData.studentAnswer = this.answerInput
        itemData.student_answer_list = [{ word_name: this.answerInput }];
      } else if (this.currentQuestion.question_type == 1) {
        params.wordName = item.paraphrase;
        params.paraphrase = item.paraphrase;
        params.answerList = this.currentQuestion.answer_list;
        params.studentAnswerList = [
          { wordName: item.wordName, paraphrase: item.paraphrase },
        ];
        // 储存数据
        itemData.paraphrase = item.paraphrase;
        // itemData.studentAnswer = item.paraphrase
        itemData.student_answer_list = [{ paraphrase: item.paraphrase }];
      } else if (this.currentQuestion.question_type == 2) {
        params.wordName = item.word_name;
        params.paraphrase = item.paraphrase;
        params.answerList = this.currentQuestion.answer_list.map((item) => {
          let res = {};
          res.wordName = item.word_name;
          res.wordId = item.word_id;
          return res;
        });
        params.studentAnswerList = [
          { wordName: item.word_name, paraphrase: item.word_name },
        ];
        // 储存数据
        // itemData.studentAnswer = item.word_id
        itemData.student_answer_list = [
          { word_id: item.word_id, word_name: item.word_name },
        ];
      }
      // this.currentQuestion=Object.assign({},itemData,this.this.currentQuestion)
      this.questionList[this.currentTopic - 1] = Object.assign(
        {},
        itemData,
        this.currentQuestion
      );
      if (this.$route.query.courseName.includes("体验")) {
        params.unitId = JSON.parse(this.$route.query.orderDetail).unitIdList[0];
      }
      if (JSON.parse(this.$route.query.orderDetail).type == 27) {
        params.isPeriod = 1;
        params.unitId = this.currentQuestion.unit_id;
      }
      const { data } = await checkVocabularyAnswer(params);
      if (data.is_true === 1) {
        this.sucssesIndex = index;
        this.topic.sucssesTopic += 1;
      } else if (data.is_true === 0) {
        this.topic.errTopic += 1;
        this.errIndex = index;
        if (this.currentQuestion.question_type == 2) {
          this.sucssesIndex = this.currentQuestion.answer_list.findIndex(
            (item) => item.word_name == data.answer_list[0].word_name
          );
        } else if (this.currentQuestion.question_type == 1) {
          this.sucssesIndex = this.currentQuestion.answer_list.findIndex(
            (item) => item.paraphrase == data.answer_list[0].paraphrase
          );
        }
      }
      this.isTrue = data.is_true;
      this.trueAnswer = data.answer_list[0].word_name;
      this.isAnswer = false;
    },
    handleReport() {
      this.resultDialogVisible = false;
      this.reportDialogVisible = true;
    },
    // _转驼峰
    underlineToHump(str) {
      // 如果首字母是_，执行 replace 时会多一个_，这里需要去掉
      if (str.slice(0, 1) === "_") {
        str = str.slice(1);
      }
      return str.replace(/([^_])(?:_+([^_]))/g, function($0, $1, $2) {
        return $1 + $2.toUpperCase();
      });
    },
    // 生成学习数据
    async checkAll() {
      let studentQuestionInfoList = [];
      const count = this.topic.sucssesTopic + this.topic.errTopic;
      let questionList = this.questionList.slice(0, count);
      let question_info_list_five = {
        totalUseTime: 5,
        questionType: 5,
        questionInfoList: [],
        score: 6.3,
      };
      let question_info_list_four = {
        totalUseTime: 5,
        questionType: 4,
        questionInfoList: [],
        score: 6.3,
      };
      let question_info_list_two = {
        totalUseTime: 5,
        questionType: 2,
        questionInfoList: [],
        score: 6.3,
      };
      let question_info_list_own = {
        totalUseTime: 5,
        questionType: 1,
        questionInfoList: [],
        score: 6.3,
      };
      questionList = JSON.parse(
        this.underlineToHump(JSON.stringify(questionList))
      );
      questionList.forEach((item) => {
        if (item.questionType == 5) {
          question_info_list_five.questionInfoList.push(item);
        }
        if (item.questionType == 4) {
          question_info_list_four.questionInfoList.push(item);
        }
        if (item.questionType == 2) {
          question_info_list_two.questionInfoList.push(item);
        }
        if (item.questionType == 1) {
          question_info_list_own.questionInfoList.push(item);
        }
      });
      if (question_info_list_five.questionInfoList.length > 0) {
        studentQuestionInfoList.push(question_info_list_five);
      }
      if (question_info_list_four.questionInfoList.length > 0) {
        studentQuestionInfoList.push(question_info_list_four);
      }
      if (question_info_list_two.questionInfoList.length > 0) {
        studentQuestionInfoList.push(question_info_list_two);
      }
      if (question_info_list_own.questionInfoList.length > 0) {
        studentQuestionInfoList.push(question_info_list_own);
      }
      let data = {
        bookId: 0,
        englishTestId: localStorage.getItem("XGZX_ENGLISH_TEST_ID"),
        source: 25,
        unitIdList: null,
        useTime: 5 * this.currentTopic,
        studentQuestionInfoList,
      };
      const res = await checkAll(data);
      this.reportTime = Date.parse(new Date());
      this.resultDialogVisible = true;
    },
    async findWordPronunciationVo() {
      if (localStorage.getItem("XGZX_QUESTION_LIST")) return;
      this.loading = true;
      const params = JSON.parse(this.$route.query.orderDetail);
      const { data } = await findWordPronunciationVo(params);
      if (!data.question_info_type_list) {
        this.$alert("当前没有学习单词,请切换版本", "提示", {
          confirmButtonText: "确定",
          callback: (action) => {
            this.$router.push({
              name: "vocabularyCenter",
            });
          },
        });
        this.loading = false;
        return;
      }
      localStorage.setItem("XGZX_ENGLISH_TEST_ID", data.english_test_id);
      this.totalScore = data.total_score;
      let questionList = [];
      data.question_info_type_list.forEach((item) => {
        questionList.push(...item.question_info_list);
      });
      this.questionList = questionList;
      this.currentTopic = 1;
      this.loading = false;
    },
  },
  async beforeRouteLeave(to, from, next) {
    localStorage.removeItem("XGZX_QUESTION_LIST");
    localStorage.removeItem("XGZX_QUESTION_CURRENTTOPIC");
    localStorage.removeItem("XGZX_ENGLISH_TEST_ID");
    window.removeEventListener("beforeunload", this.savaData);
    next();
  },
};
</script>

<style lang="scss" scoped>
.study-center {
  margin-top: 32px;

  .study-center-title {
    text-align: center;
    font-size: 22px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #363636;
  }

  .study-content {
    margin: 22px 56px 0;
    border: 1px solid #ececec;
    border-radius: 2px;

    .study-content-header {
      padding: 22px 265px 12px !important;

      .progress {
        margin: 12px 0 14px !important;
      }
    }

    // 拼写
    .study-content-answer {
      margin: 33px 0 102px;
      .title {
        text-align: center;
        width: 300px;
        font-size: 24px;
        font-weight: bold;
        color: #ff9610;
        margin-bottom: 28px;
      }
      .input4 {
        display: flex;
        justify-content: center;
        .succeed-img {
          width: 44px;
          height: 36px;
        }

        .error-img {
          width: 32px;
          height: 32px;
        }
      }
      .input5 {
        display: flex;
        flex-direction: column;
        align-items: center;
        .succeed-img {
          width: 44px;
          height: 36px;
        }

        .error-img {
          width: 32px;
          height: 32px;
        }
      }

      .answerInput {
        margin: 0 14px 0;
        width: 376px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #d8d8d8;
        border-radius: 6px;
      }

      .notarize {
        width: 116px;
        height: 40px;
        background: #1472ff;
        // border-radius: 2px;
        font-size: 18px;
        // text-align: center;
        color: #ffffff;
        // line-height: 40px;
      }
    }

    // 单选
    .study-content-multiple-choice {
      display: flex;
      flex-direction: column;
      align-items: center;

      .title {
        text-align: center;
        width: 300px;
        font-size: 24px;
        font-weight: bold;
        color: #ff9610;
        margin-bottom: 28px;
      }

      .selectOption {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 560px;
        height: 40px;
        background: #ffffff;
        border: 1px solid #d8d8d8;
        border-radius: 6px;
        padding-left: 20px;
        padding-right: 50px;
        margin-bottom: 16px;
        color: #363636;

        .txt {
          text-indent: 2;
          font-size: 16px;
          font-weight: bold;
        }

        .succeed-img {
          width: 22px;
          height: 18px;
        }

        .error-img {
          width: 16px;
          height: 16px;
        }
      }

      .succeed {
        border: 1px solid #1472ff;
        color: #2c80ff;
      }

      .error {
        border: 1px solid #ee533f;
        color: #ee533f;
      }
    }

    .study-footer {
      margin-bottom: 173px;
      text-align: center;

      .tip {
        font-size: 14px;
        font-weight: 400;
        color: #1472ff;
      }

      .btn-box {
        margin-top: 28px;
        color: #ffffff;
        text-align: center;
        line-height: 50px;

        .btn-submit {
          display: inline-block;
          width: 196px;
          height: 50px;
          background: rgb(236, 89, 50);
          border-radius: 2px;
          margin-right: 20px;
        }

        .btn-next {
          display: inline-block;
          width: 196px;
          height: 50px;
          color: #ffffff;
          background: #ff9610;
          border-radius: 2px;
        }
      }
    }
  }
}

/deep/ .el-dialog .el-dialog__header {
  background: #ffffff;
  height: 75px;

  .el-dialog__title {
    line-height: 55px;
    font-size: 22px;
    font-weight: bold;
    color: #363636;
  }
}

/deep/ .el-dialog--center .el-dialog__body {
  padding: 0px 25px 0px;

  .el-divider--horizontal {
    margin: 0;
    background: #f2f2f2;
  }

  .result-content {
    display: flex;
    flex-direction: column;
    align-items: center;

    .result-content-top {
      margin: 34px 0 15px;
      font-size: 16px;
      font-weight: 400;
      color: #363636;

      .sucsses {
        color: #2c80ff;
      }

      .error {
        margin: 0 26px;
        color: #d81e06;
      }

      .time {
        color: #ff9610;
      }
    }

    .result-content-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 330px;
      font-size: 20px;
      line-height: 36px;
      font-weight: bold;
      color: #363636;

      .percentage {
        color: #ff9610;
        font-size: 24px;
      }

      .ispass {
        margin-top: 14px;
        color: #f76a48;
      }

      .pass {
        color: #1472ff;
      }
    }
  }
}

/deep/ .el-dialog--center .el-dialog__footer {
  padding-top: 38px;
  padding-bottom: 30px;

  .report {
    width: 196px;
    height: 50px;
    background: $color-main;
    color: #ffffff;
    border-radius: 2px;
  }

  .quit {
    width: 196px;
    height: 50px;
    background: #ff9610;
    color: #ffffff;
    border: none;
    border-radius: 2px;
  }
}

.mr10 {
  margin-right: 10px;
}

.report-content {
  .report-content-top {
    .title {
      padding: 28px 0 22px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #363636;
    }

    .title::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 15px;
      background: #2c80ff;
    }

    .info {
      margin-left: 24px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #363636;
    }
  }

  .report-content-center {
    .title {
      padding: 28px 0 12px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #363636;
    }

    .title::before {
      content: "";
      display: inline-block;
      width: 3px;
      height: 15px;
      background: #2c80ff;
    }

    .content {
      padding-left: 24px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #363636;
      line-height: 36px;
    }
  }
}
.disabled {
  background-color: #ccc !important;
}
</style>
